<template>

  <div class="main-content" style="width: 60%">

    <div class="card" style="font-size: 24px;padding: 15px;margin-bottom: 10px">
      我的收藏
    </div>

    <div class="card">

      <div style="margin-bottom: 5px">
        <el-table stripe :data="data.tableData" >
          <el-table-column prop="activityName" label="活动名称">
            <template #default="scoped">
              <a target="_blank" :href="'/front/activityDetail?id='+scoped.row.activityId">{{scoped.row.activityName}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名称"></el-table-column>
          <el-table-column prop="time" label="收藏时间"></el-table-column>
          <el-table-column label="操作" width="100" fixed="right">
            <template v-slot="scope">
              <el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div  v-if="data.total">
        <el-pagination  @current-change="load" layout="prev,pager,next" background :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
      </div>
    </div>
  </div>



</template>
<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";


  const data=reactive({
    formVisible:false,
    form:{},
    tableData:[],
    pageNum:1,
    pageSize:5,
    total:0,
    activityId:null,
    ids:[],
    activityList:[],
  })


request.get('/activity/selectAll').then(res=>{
  data.activityList=res.data
})

  const add = () =>{
    request.post('/collect/add',data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success("操作成功")
        data.formVisible=false
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }


  const load = () =>{
    request.get('/collect/selectPage',{
      params:{
        pageNum:data.pageNum,
        pageSize:data.pageSize,
        activityId:data.activityId
      }
    }).then(res=>{
      if(res.code === "200"){
        data.tableData=res.data?.list || []
        data.total=res.data?.total
      }
    })
  }

  const update = () => {
    request.put('/collect/update', data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success('操作成功');
        data.formVisible=false
        load()
      }
    })
  }

  const del = (id) =>{
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
      request.delete('/collect/delete/'+id).then(res=>{
       if (res.code === '200'){
         ElMessage.success("删除成功")
         load()
       }else {
         ElMessage.error(res.msg)
       }
      })
    }).catch(err=>{
      console.error(err)
    })
  }
  


  const handleSelectionChange = (rows) => {
    data.ids=rows.map(v=>v.id)
  }



  const save =()=>{
    data.form.id?update():add()
  }

  const reset = () =>{
    data.activityId=null
    load()
  }
  load()
</script>